<template>
  <div>
    <h1>render</h1>
    <p>组件props传level 1 2 5</p>
    <tagCom :level="1"><span>开心</span></tagCom>
    <tagCom :level="3"><span>超人</span></tagCom>
    <div>
      <h1>component动态组件</h1>
      <button @click="current = 'acom'">a</button>
      <button @click="current = 'bcom'">b</button>
      <button @click="current = 'ccom'">c</button>
      <component :is="current"></component>
      <h1>混合</h1>
      <p>记录下每个页面渲染的次数并显示出来</p>
      <p>每个页面都有times的数据，相同生命周期create</p>
      <p>次数{{ times }}</p>

      <h1>$nextTick</h1>
      <p id="msg1">{{ msg1 }}</p>
      <p>{{ msg2 }}</p>
      <button @click="changeMsg">修改msg1</button>

      <h1>$set方法</h1>
      <div v-for="(item, index) in list" :key="index" v-once="item"></div>
      <button @click="changeArr">修改</button>
      <button @click="vlist[0] = '开心'">修改第一条</button>
      <div>
        <div v-for="item in vlist" :key="item">{{ item }}</div>
      </div>
    </div>
  </div>
</template>
<script>
const tagCom = {
  props: {
    level: {
      type: Number,
      required: true,
    },
  },
  render: function (h) {
    // h方法createElement 返回是虚拟dom
    // render方法返回的时候虚拟dom
    // .vue 最终会被编译成什么？
    // 返回的是对象 对象中有个重要render方法
    // render方法值会创建虚拟dom节点
    // h(tag,props,children)
    // h(tag,children)
    var VNode = h(
      "h" + this.level,
      {
        attrs: {
          myid: "abc",
        },
        class: { active: true },
      },
      [
        "中国真的大",
        h("a", { attrs: { href: "https://baidu.com" } }, "百度"),
        this.$slots.default,
      ]
    );
    console.log("VNode", VNode);
    return VNode;
  },
};
import acom from "@/components/ACom.vue";
console.log(acom.render, "acom");
export default {
  name: "home",
  components: {
    tagCom,
    acom: () => import("@/components/ACom.vue"),
    bcom: () => import("@/components/BCom.vue"),
    ccom: () => import("@/components/CCom.vue"),
  },
  data() {
    return {
      current: "acom",
      list: ["我要当前端经理", "我要当经理的媳妇"],
      vlist: [],
      msg1: "早安您呢",
      msg2: "晚安！",
    };
  },
  created() {
    this.genData();
    console.log(this);
  },
  methods: {
    changeMsg() {
      this.msg1 = "中国是伟大的国家";
      var msg = document.getElementById("msg1");
      // 设置msg2的值为 msg1内容
      // 数据更新，等待dom更新完毕后执行回调函数
      this.$nextTick(() => {
        this.msg2 = msg.innerHTML;
      });
    },

    // 页面显示1000数据如果优化，
    genData() {
      var vlist = [];
      for (var i = 0; i < 3; i++) {
        vlist.push("第" + i + "条");
      }
      // 把数据冻结起来，不让它参与响应式，值复制显示
      this.vlist = Object.freeze(vlist);
      // this.vlist[0].name = "我要毕业了";
    },
    changeArr() {
      // this.list[1] = "我要总统的花";
      this.$set(this.list, 1, "我要当总裁");
      console.log(this.list);
    },
  },
};
</script>
